<template>
    <section id="app">
      <TaskTop @add="handleAdd"></TaskTop>
      <TaskList :list="list" @del="handelDel"></TaskList>
      <TaskBottom :list="list" @clear="clear"></TaskBottom>
    </section>
</template>

<script>

import TaskTop from './components/TaskTop.vue';
import TaskList from './components/TaskList.vue';
import TaskBottom from './components/TaskBottom.vue';

export default {

  data(){
    return {
      list: JSON.parse(localStorage.getItem('list')) || [
        { id: 1, name: '吃吃' },
        { id: 2, name: '喝喝' },
        { id: 3, name: '哈哈' },
      ],
    }
  },

  components: {
    TaskTop,
    TaskList,
    TaskBottom,
  },
  methods: {
    handleAdd(taskName) {
      // console.log(todoName)
      this.list.unshift({
        id: +new Date(),
        name: taskName,
      })
    },
    handelDel(id) {
      // console.log(id);
      this.list = this.list.filter((item) => item.id !== id)
    },
    clear() {
      this.list = []
    },
  },
}
</script>

<style>

</style>
